<template>
  <ul class="pagination">
    <li :class="{'disabled':curGroup==1}" title="上一组">
      <span @click="goGroup(curGroup==1?1:curGroup-1)" aria-label="Previous">&lsaquo;</span>
    </li>
    <li :class="{'disabled':curPage==1}" title="上一页">
      <span @click="goPage(curPage == 1?1:curPage-1)" aria-label="Previous">&laquo;</span>
    </li>
    <li v-for="(page,index) in pages" :key="page.id" :class="{'active':(index+1)==curPage}">
      <span @click="goPage(index+1)">{{index+1}}</span>
    </li>
    <li :class="{'disabled':curPage==pages.length}" title="下一页">
      <span @click="goPage(curPage==pages.length?pages.length:curPage+1)" aria-label="Next">&raquo;</span>
    </li>
    <li :class="{'disabled':curGroup==groups}" title="下一组">
      <span @click="goGroup(curGroup==groups?groups:curGroup+1)" aria-label="Next">&rsaquo;</span>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    groups: {
      type: Number,
    },
    pages: {
      type: Array,
    },
  },
  data() {
    return {
      curPage: 1,
      curGroup: 1,
    };
  },
  methods: {
    change() {
      this.curPage = 1;
      this.curGroup = 1;
    },
    goPage(pageNum) {
      if (pageNum != this.curPage) {
        this.curPage = pageNum;
        this.$emit('navpage', this.curPage);
      }
    },
    goGroup(group) {
      if (group != this.curGroup) {
        this.curPage = 1;
        this.curGroup = group;
        this.$emit('navgroup', { curgroup: this.curGroup, curpage: this.curPage });
      }
    },
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .pagination
    display: inline-block
    border-radius: 4px
    li
      display: inline
      span
        display: inline-block
        padding: 6px 12px
        margin-left: -1px
        line-height: 1.42857143
        color: #337ab7
        text-decoration: none
        background-color: #fff
        border: 1px solid #ddd
        cursor: pointer
        &:hover, &:active
          color: #fff
          background-color: #23527c
          border-color: #ddd
      &.disabled
        span
          color: #ccc
          &:hover, &.active
            background: #fff
            color: #ccc
</style>
